<template>
  <div class="app-container">
    <Waterfall
      :images="images"
      :column-count="4"
      :column-gap="10"
      background-color="#fff"
      :border-radius="6"
    />
  </div>
</template>

<script lang="ts" setup name="PageName">
defineOptions({
  name: "Role",
  inheritAttrs: false,
});
import Waterfall from "./components/Waterfall.vue";
const images = ref<any[]>([]);

for (let i = 1; i <= 20; i++) {
  images.value.push({
    title: `image-${i}sadfsdfsdfsdfwer撒旦飞洒地方士大夫士大夫撒旦飞洒地方撒旦法撒旦法撒旦法撒旦飞洒地方撒旦飞洒地方说的沃尔沃二群若werwerwer撒旦飞洒地方撒旦法撒旦法撒旦飞洒地方撒旦法`,
  });
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
}
</style>
